<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Windows 12</title>
    <link rel="stylesheet" href="./bios.css">
    <script>
        var code="null";
        function addZero(i) {
            return i < 10 ? ('0' + i) : i
        }
        function timeChange() {
            d = new Date()
            document.getElementById('time').innerHTML = "[" + addZero(d.getHours()) + ":" + addZero(d.getMinutes()) + ":" + addZero(d.getSeconds()) + "]";
            document.getElementById('date').innerHTML = "[" + d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear() + "]";

            //顺便适应高度
            document.getElementById('body').style.height = window.innerHeight + "px";
            document.getElementById('mainPage').style.height = (window.innerHeight - 150) + 'px';
            document.getElementById('exitPage').style.height = (window.innerHeight - 150) + 'px';
        }
        function toBoot(){
            document.getElementById('background').style.display='';
            setTimeout('document.getElementById(`body`).innerHTML=``;document.getElementById(`body`).style.cssText=`background-color: black;`;',500);setTimeout('window.location.href=`./boot.html`',1000); //Boot延迟
        }
        function BIOS_confirm(tit,okcode,width){
            document.getElementById('confirm-tit').innerHTML = tit;
            document.getElementById('exit_confirm').style.display='';
            document.getElementById('background').style.display='';
            document.getElementById('confirm').style.width=(window.innerWidth*width/100)+"px";
            code = okcode;
        }
        setTimeout("timeChange();setInterval(timeChange,1000)", 1000 - (new Date()).getMilliseconds());//精确时间
    </script>
</head>

<body id="body" scroll="no">
    <div id="exit_confirm" style="display:none;background-color: white;padding-top: 20px;padding-bottom: 20px;padding-left: 10px;padding-right: 10px;position: absolute;left:35%;top:42.5%;/**/box-shadow: 8px 16px 0px 0px #000;z-index:1919810;">
        <div id="confirm" style="background-color: white; color:black;border:3.5px solid #000; padding: 5px;display: flex;flex-direction: column;">
            <p style="text-align: center;margin-top: 15px;flex: 35;flex: 25;" id="confirm-tit"> Save configuration changes and exit now? </p>
            <div style="flex: 1;"></div>
            <div style="display: flex;align-items: center;justify-content: center;flex: 25;">
                <a class="confirm-button" id="ok-btn" style="background-color: #000;color: #fff;" click="eval(code)">[OK]</a>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
                <a class="confirm-button" style="color: #000;background-color: #fff;" click="document.getElementById('exit_confirm').style.display = 'none';document.getElementById('background').style.display = 'none';" id="cancel-btn">[Cancel]</a>
            </div>
        </div>
    </div>
    <div style="position: absolute;background-color: rgba(11,45,14,0);top:0;left:0;width:100%;height:100%;display: none;z-index:114514;" id="background"></div>

    <head>
        <nav>
            <p class="tit">BIOS Setup Utility</p>
        </nav>
        <nav class="pages" style="padding-left: 15px;">
            <a class="page" id="main" click="tab=0;ChangePage()">Main</a>
            <a class="page" id="exit" click="tab=1;ChangePage()">Exit</a>
        </nav>
    </head>
    <div id="mainPage">
        <table class="option" style="cursor: default;">
            <tr>
                <td>
                    System Time:
                </td>
                <td style="width:10px;"></td>
                <td id="time">
                    [11:45:14]
                </td>
            </tr>
            <tr style="height:10px;"></tr>
            <tr>
                <td>
                    System Date:
                </td>
                <td style="width:10px;"></td>
                <td id="date">
                    [10/08/1919]
                </td><!--注意：这里的日期为[日/月/年]-->
            </tr>
        </table>
    </div>
    <div id="exitPage">
        <a click="BIOS_confirm(' Save configuration changes and exit now? ','toBoot()',30)" class="exit" id="e1">Exit Saving Changes</a>
        <br/>
        <div style="height:10px;width: 10px;"></div><!--占位控件-->
        <a click="BIOS_confirm(' Discard changes and exit setup? ','toBoot()',25);" class="exit" id="e2">Exit Discarding Changes</a>
        <br/>
        <div style="height:10px;width: 10px;"></div><!--占位控件-->
        <a click="BIOS_confirm('  Restore default setup?  ','document.getElementById(`exit_confirm`).style.display = `none`;document.getElementById(`background`).style.display = `none`;',18);" class="exit" id="e3">Restore Defaults</a>
    </div>
    <script>
        var here;
        var tab = 0,tab_back=tab;
        var btn = 0,btn_back = btn;
        var foc=0,foc_back=foc;
        timeChange();
        function ChangePage(){
            if (!tab) {
                document.getElementById('exitPage').style.display = 'none';
                document.getElementById('mainPage').style.display = '';
                document.getElementById('exit').style.cssText = 'background-color: #0100a2;color: #aaaaaa;';
                document.getElementById('main').style.cssText = 'color: #ffffff;background-color: #aaaaaa;';
                here = 'main';
                tab = 0;
            } else {
                document.getElementById('mainPage').style.display = 'none';
                document.getElementById('exitPage').style.display = '';
                document.getElementById('main').style.cssText = 'background-color: #0100a2;color: #aaaaaa;';
                document.getElementById('exit').style.cssText = 'color: #ffffff;background-color: #aaaaaa;';
                here = 'exit';
                tab = 1;
            }
        }
        ChangePage();
        h = window.innerHeight * 0.15;
        w = window.innerWidth * 0.3;
        document.getElementById('confirm').style.height = h + "px";
        document.getElementById('confirm').style.width = w + "px";
        document.oncontextmenu = function(){
            return false;
        }
        var tabs = ['main','exit']
        window.onkeydown = function(event){
            event = event || window.event;
            tab_back = tab;
            if(document.getElementById('background').style.display!=''){
                if (event.keyCode == 39) {
                    tab++;
                } else if (event.keyCode == 37){
                    tab--;
                }
                if(tab+1>0&&tab+1<=tabs.length&&foc==0){
                    if([37,39].includes(event.keyCode)){
                        ChangePage();
                    }
                } else {
                    tab = tab_back;
                }
                foc_back=foc;
                if (event.keyCode == 40) {
                    foc++;
                } else if (event.keyCode == 38){
                    foc--;
                }
                if(tab==1&&foc<=3&&foc>=0){
                    if(!foc){ //0
                        if(tab)
                            document.getElementById('exit').style.cssText = 'color: #ffffff;background-color: #aaaaaa;';
                        else
                            document.getElementById('main').style.cssText = 'color: #ffffff;background-color: #aaaaaa;';
                        for(var i=1;i<=3;i++)
                            document.getElementById('e'+i).style.color = "#0100a2";
                    } else {
                        if(tab)
                            document.getElementById('exit').style.cssText = 'color: #0100a2;background-color: #aaaaaa;';
                        else
                            document.getElementById('main').style.cssText = 'color: #0100a2;background-color: #aaaaaa;';
                        for(var i=1;i<=3;i++)
                            document.getElementById('e'+i).style.color = "#0100a2";
                        document.getElementById('e'+foc).style.color = "#fff";
                        if(event.keyCode==13){
                            eval(document.getElementById('e'+foc).getAttribute('click'));
                        }
                    }
                } else{
                    foc=foc_back;
                }
            } else {
                btn_back = btn;
                if (event.keyCode == 39) {
                    btn++;
                } else if (event.keyCode == 37){
                    btn--;
                }
                if([0,1].includes(btn)){
                    if(btn){//1
                        document.getElementById('cancel-btn').style.cssText ="background-color: #000;color: #fff;";
                        document.getElementById('ok-btn').style.cssText = "color: #000;background-color: #fff;";
                    } else {//0
                        document.getElementById('ok-btn').style.cssText = "background-color: #000;color: #fff;";
                        document.getElementById('cancel-btn').style.cssText = "color: #000;background-color: #fff;";
                    }
                } else {
                    btn = btn_back;
                }
                if(event.keyCode==13){
                    if(btn){
                        eval(document.getElementById('cancel-btn').getAttribute('click'));
                    } else {
                        eval(document.getElementById('ok-btn').getAttribute('click'));
                    }
                    btn = 0;
                    document.getElementById('ok-btn').style.cssText = "background-color: #000;color: #fff;";
                    document.getElementById('cancel-btn').style.cssText = "color: #000;background-color: #fff;";
                }
            }
        }
    </script>
</body>

</html>